<template>
  <div id="index">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img
          class="imgitem"
          :src="'http://liufusong.top:8080' + image.imgSrc"
        />
      </van-swipe-item>
    </van-swipe>
    <div id="search">
      <van-search
        v-model="value"
        show-action
        background="transparent"
        placeholder="请输入小区或地址"
      >
        <template #label> <div @click="$router.push('/city')">{{currentCity.city}} &nbsp;<van-icon name="arrow-down" /></div> </template>
        <template #action>
          <div @click="$router.push('/map')"><van-icon color="#fff" name="location-o" size="28px" /></div>
        </template>
      </van-search>
    </div>
    <van-grid icon-size="50px">
      <van-grid-item icon="wap-home-o" to="/layout/house" text="整租" />
      <van-grid-item icon="wap-home-o" to="/layout/house" text="合租" />
      <van-grid-item icon="wap-home-o" text="地图找房" to="/map" />
      <van-grid-item to="/add" icon="wap-home-o" text="去出租" />
    </van-grid>
    <div class="team">
      <van-cell title="租房小组" value="更多" />
      <van-grid :gutter="10" :border="false" :column-num="2">
        <van-grid-item v-for="item in groups" :key="item.id">
          <template #default>
            <div class="item">
              <div class="left">
                <img :src="'http://liufusong.top:8080'+item.imgSrc" alt="" />
              </div>
              <div class="right">
                <p>{{item.title}}</p>
                <p>{{item.desc}}</p>
              </div>
            </div>
          </template>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getSwi } from '@/api/home.js'
import { getgroups } from '@/api/city.js'
export default {
  name: 'HOME',
  data () {
    return {
      images: [],
      value: '',
      groups: []
    }
  },
  computed: {
    ...mapState(['currentCity'])
  },
  created () {
    this.getswiper()
    this.getId()
  },

  methods: {
    async getId () {
      try {
        const res1 = await getgroups(this.currentCity.id)
        this.groups = res1.data.body
      } catch (err) {
        console.log(err.message)
      }
    },
    async getswiper () {
      try {
        const res = await getSwi()
        this.images = res.data.body
      } catch (err) {
        console.log(err.message)
      }
    }
  }
}
</script>

<style scoped lang="less">
.imgitem {
  height: 212px;
  width: 375px;
}
/deep/.van-swipe{
  min-height:200px;
}
#index {
  position: relative;
  #search {
    position: absolute;
    top: 20px;
    left: 33px;
    background-color: transparent;
  }
  /deep/.van-grid-item{
    border:none;
    .van-grid-item__icon{
      border-radius: 50%;
      background-color: #f2fbf7;
      color: #1db778;
    }
  }
  .team {
    background-color: #f6f5f6;
    padding-bottom: 10px;
    /deep/.van-cell{
      background-color: #f6f5f6;
    }
    /deep/.van-cell__title{
      font-size: 15px;
      font-weight: bold;
    }
    .item {
      background-color: #fff;
      padding: 0;
      margin: 0;
      height: 50px;
      .left {
        float: left;
        height: 50px;
        width: 50px;
        background-color: skyblue;
        margin: 0 10px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .right {
        float: left;
        p {
          font-size: 14px;
          line-height: 25px;
          margin: 0;
          padding: 0;
        }
      }
    }
  }
}
</style>
